<template>

  <div class="mt-4">
    <el-input placeholder="Please input" v-model="search"  class="input-with-select" style="width: 600px; ">
      <template #append>
        <el-button >搜索</el-button>
      </template>
    </el-input>
    &nbsp;
    <el-button type="primary" @click="addPage">添加电影 </el-button>
  </div>
  <!-- 添加或删除 -->
  <el-table
    :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
    style="width: 100%">
    <el-table-column label="序号" prop="id">
    </el-table-column>
    <el-table-column label="电影名" prop="film">
    </el-table-column>
    <el-table-column label="封面" prop="img">
      <template #default="scope">
          <img :src="scope.row.tp" alt="" id="img">
        </template>
    </el-table-column>
    <el-table-column label="详情" prop="txt" width="500px">
    </el-table-column>
    <el-table-column label="导演" prop="name">
    </el-table-column>
    <el-table-column label="类型" prop="prices">
    </el-table-column>
    <el-table-column label="上映时间" prop="time">
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
  </div>
  <filmcom @getlist="getlist"></filmcom>
  <appPage @getlist="getlist"></appPage>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import appPage from '../components/appPage.vue';
import filmcom from '../components/Filmcom.vue';
import http from '../util/api';

// 显示页数
const currentPage4 = ref(1);
// 最多显示几条
const pageSize4 = ref(10);
const search = ref('');
const store = useStore();
const userList = ref([]);
onMounted(() => {
  getlist();
});
// filter过滤
// toLowerCase把字符串转换小写
// includes(search.value.toLowerCase())查找字符串是否包含search.value.toLowerCase()
const filterTableData = computed(() => userList.value.filter((item: any) => item.film.toLowerCase().includes(search.value.toLowerCase())));
const getlist = () => {
  http('/movie').then((res: any) => {
    console.log(res);
    userList.value = res.data;
    console.log('666', userList.value);
  });
};
// 添加信息
const addPage = (row:any) => {
  store.commit('SET_NAV');
  store.commit('Data', row);
};

// 编辑信息
const handleEdit = (row: any) => {
  console.log(row);
  store.commit('SET_DIALOG');
  store.commit('List', row);
};
// 删除信息
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确定删除该用户吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      http(`/movie/${row.id}`, 'delete').then((res:any) => {
        console.log(res);
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getlist();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
      getlist();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};
const handleSizeChange = (val: any) => {
  pageSize4.value = val;
};
const handleCurrentChange = (val: any) => {
  currentPage4.value = val;
};
</script>
<style scoped>
#img{
  width: 150px;
  height: 200px;
}
</style>
